<script lang="ts" setup>
import CommonPage from "@/newComponents/CommonPage.vue";
import LzCategoryAPI from "@/api/content/lz-category";
import CategoryDialog from "@/views/content/lz-category/categoryDialog.vue";
import { formatter } from "@/utils/formatterUtils";

const pageRef = ref();
async function changeStatus(val: any, row: any) {
  row.status = val;
  try {
    pageRef.value.loading = true;
    await LzCategoryAPI.updateStatus(+row.id, val);
    pageRef.value?.toReset();
    ElMessage.success("修改状态成功");
  } finally {
    pageRef.value.loading = false;
  }
}
</script>
<template>
  <common-page ref="pageRef" :page-api="LzCategoryAPI" :component="CategoryDialog">
    <template #formContent="{ filters }">
      <el-form-item label="分类名" prop="name">
        <el-input v-model="filters.name" placeholder="请输入分类名" clearable></el-input>
      </el-form-item>
    </template>
    <template #tableContent>
      <el-table-column key="id" label="id" prop="id" min-width="150" align="center" :formatter />
      <el-table-column
        key="name"
        label="分类名"
        prop="name"
        min-width="150"
        align="center"
        :formatter
      />
      <el-table-column
        key="pid"
        label="父分类名"
        prop="parentName"
        min-width="150"
        align="center"
        :formatter
      />
      <el-table-column
        key="description"
        label="描述"
        prop="description"
        min-width="150"
        align="center"
        :formatter
      />
      <el-table-column key="status" label="状态" prop="status" min-width="150" align="center">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            active-text="启用"
            inactive-text="禁用"
            active-value="1"
            inactive-value="0"
            @change="changeStatus($event, row)"
          />
        </template>
      </el-table-column>
    </template>
  </common-page>
</template>
<style lang="scss" scoped></style>
